<template>
  <div class="starfield">
    <div v-for="star in stars" :key="star.id" :style="{ top: star.top, left: star.left }" class="star"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stars: [],
      speed: 0.1 // 星空移动速度，单位为像素/秒
    };
  },
  mounted() {
    this.generateStars();
    this.animate();
  },
  methods: {
    generateStars() {
      for (let i = 0; i < 100; i++) {
        const star = {
          id: i,
          top: Math.random() * 100 + '%',
          left: Math.random() * 100 + '%'
        };
        this.stars.push(star);
      }
    },
    moveStars() {
      for (let i = 0; i < this.stars.length; i++) {
          const star = this.stars[i];
          star.top = parseFloat(star.top) - this.speed + '%';
          if (parseFloat(star.top) < -10) { // 判断星星是否超出可视范围
              star.top = 100 + '%'; // 将星星位置重置到底部
          }
      }
    },
    animate() {
      this.moveStars();
      requestAnimationFrame(this.animate);
    }
  }
};
</script>

<style>
.starfield {
  position: absolute;
  top: 0;
  z-index: 0;
  background-color: black;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
}
</style>